<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分类列表页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>
<body>
    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left aui-btn" onclick="closewin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">{{ title }}</div>
    </header>
</body>
</html>

<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script src="../script/vue.js"></script>
<script>
    var vm = new Vue({
        el: 'header',
        data: {
            is_openFrame: 0,
            title: '',
            pid: '',
            list: [],
            cid: ''
        },
        methods: {
            init: function () {
                api.ajax({
                    url: cate_list_two_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            pid: vm.pid
                        },
                    }
                }, function (ret, err) {
                    if (ret) {
                        vm.list = ret.data;
                        console.log(JSON.stringify(vm.list));
                        var items = [];
                        for (var i=0; i<vm.list.length;i++){
                            var item = {
                                title:vm.list[i].title,
                                bg: '#fff',
                                bgSelected:'widget://image/cc.png'
                            };
                            items.push(item);
                        }
                        console.log(JSON.stringify(items));
                        vm.open_navigationBar(items);
                        console.log(JSON.stringify(ret));
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
            open_navigationBar: function (items) {
                var navigationBar = api.require('navigationBar');
                navigationBar.open({
                    y: $api.dom('header').offsetHeight,
                    w: api.frameWidth,
                    h: 42,
                    itemSize: {
                        w: 90
                    },
                    items: items,
                    font: {
                        size: 14,        //选前时导航项字体大小；默认：14
                        sizeSelected: 16,//选中时导航项字体大小；默认：14
                        color: '#757575',   //选前时导航项字体颜色
                        colorSelected: '#000033'//选中时导航项字体颜色
                    },
                    bg: "#f4f4f4", // 背景
                    fixedOn: api.frameName,
                    selectedIndex: 0
                }, function(ret, err) {
                    if (ret) {
                        var index = ret.index;
                        vm.cid = vm.list[index].id;//属于win页面，也就是父页面

                        console.log(vm.cid);
                        if(vm.is_openFrame == 0){
                            vm.is_openFrame = 1;
                            vm.openFrame_list();//打开子页面，并且传参数
                        }

                        //发送监听
                        api.sendEvent({
                            name: 'init_article_list',
                            extra: {
                                cid: vm.cid
                            }
                        });


                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
            openFrame_list:function () {
                api.openFrame({
                    name: 'cate_list_frm',
                    url: 'widget://html/cate_list_frm.html',
                    rect: {
                        x: 0,
                        y: $api.dom('header').offsetHeight + 42,
                        w: 'auto',
                        h: api.winHeight - $api.dom('header').offsetHeight - 42
                    },
                    bounces: true,
                    pageParam: {
                        cid: vm.cid
                    }
                });
            }
        }
    });

    apiready = function () {
        $api.fixIos7Bar($api.dom("header"));
        vm.pid = api.pageParam.pid;
        vm.title = api.pageParam.title;
        vm.init();
    };
</script>
